<template>
  <div class="app-container">
    <el-form v-show="showSearch" :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="手机号：" prop="phone">
        <el-input
          v-model.trim="queryParams.phone"
          placeholder="请输入手机号"
          clearable
          @keyup.enter="handleSearch(true)"
          style="width: 200px"
        />
      </el-form-item>
      <el-form-item label="充值时间：" prop="dateRange">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD HH:mm:ss"
          :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
        />
      </el-form-item>

      <el-form-item label="&nbsp;">
        <el-button @click="handleSearch(false)">重置</el-button>
        <el-button type="primary" @click="handleSearch(true)">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="用户" align="center" prop="nickName" />
      <el-table-column label="手机号" align="center" prop="phone" />
      <el-table-column label="充值时间" width="260px" align="center" prop="createTime" />
      <el-table-column label="充值金额（元）" align="center" prop="money" />
      <el-table-column label="赠送消费金额（元）" align="center" prop="giftGold" />
      <el-table-column label="额外储值权益" align="center" prop="cityName">
        <template #default="{ row }">
          <el-button v-show="row.storedCouponId" type="primary" link @click="handleSkip(row, true)"
            >{{ handleButton(row, true) }}
          </el-button>
          <el-button
            v-show="row.oneRechargeCouponId && row.oneRechargeCouponId !== row.storedCouponId"
            type="primary"
            link
            @click="handleSkip(row, false)"
            >{{ handleButton(row, false) }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script setup>
import { getRecordListApi } from '@/api/storedEquity'

const showSearch = ref(true)
const loading = ref(false)
const queryRef = ref()
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  phone: null
})
const dateRange = ref([])
const list = ref([])
const total = ref(0)

const router = useRouter()

/**搜索 */
function handleSearch(type) {
  if (type) {
    queryParams.value.pageNum = 1
    getList()
  } else {
    dateRange.value = []
    queryRef.value.resetFields()
    handleSearch(true)
  }
}
/**跳转到优惠券页面 */
function handleSkip(row, type) {
  router.push({
    path: '/market/activity',
    query: {
      id: type ? row?.storedCouponId : row?.oneRechargeCouponId,
      couponName: type ? row?.storedCouponName : row?.oneRechargeCouponName,
      cityName: '全国'
    }
  })
}
/** 列表跳转按钮展示 */
function handleButton(row, type) {
  if (row.oneRechargeCouponId === row.storedCouponId && type) {
    return `${row.storedCouponName}x${row.storedCouponCount + row.oneRechargeCouponCount}`
  } else if (type) {
    return `${row.storedCouponName}x${row.storedCouponCount}`
  } else {
    return `${row.oneRechargeCouponName}x${row.oneRechargeCouponCount}`
  }
}
/**获取列表数据 */
function getList() {
  loading.value = true
  const params = {
    ...queryParams.value,
    startTime: dateRange.value ? dateRange.value[0] : null,
    endTime: dateRange.value ? dateRange.value[1] : null
  }
  getRecordListApi(params)
    .then((res) => {
      loading.value = false
      console.log(res)
      list.value = res.rows || []
      total.value = res.total || 0
    })
    .catch(() => {
      loading.value = false
    })
}
getList()
</script>
<style lang="scss" scoped></style>
